<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="成绩查询" :isBlur="true" :isAppBtn="false" :isHome="false"/>
		<view class="container color-9899A1 fboxCol Xcenter">
			<view class="text">重名啦~你可能是下面的谁？</view>
			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="item"
					:class="checkStudentCode == item.studentCode ? 'check' : ''" @click="onCheck(item)">
					<text>{{item.studentName}}</text>
					（<text>{{item.className}}</text>）
				</view>
			</view>
		  <u-overlay :show="show" @click="show = false">
			  <view class="dialog-box font28">
			    <view class="info color-6A6A6F">
			  	<text>{{sameNameObj.studentName}}，</text>
			  	<text>{{sameNameObj.className}}，</text>
			  	<text>{{sameNameObj.newTotalScore}}</text>
			    </view>
			    <view class="score fboxRow Xbetween color-9899A1">
			  	<view class="item">
			  	  <view>{{sameNameObj.chinese}}</view>
			  	  <view>语文</view>
			  	</view>
			  	<view class="item">
			  	  <view>{{sameNameObj.mathematics}}</view>
			  	  <view>数学</view>
			  	</view>
			  	<view class="item">
			  	  <view>{{sameNameObj.english}}</view>
			  	  <view>外语</view>
			  	</view>
			    </view>
			    <view>
				  <view class="btn fboxRow Ycenter Xcenter font28" @click="onClick">
				  	查看详细成绩
				  </view>
			    </view>
			  </view>
		  </u-overlay>
		</view>
	</view>
</template>

<script>
	import {
		studentInfo,sameName
	} from '@/api/bks.index.js'
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	export default {
		components: {headerCustom},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				list: [],
				checkStudentCode: '',
				examObj: {},
				sameNameObj: {},
				studentName: '',
				unitId: '',
				show: false
			}
		},
		onLoad(options) {
			if(options &&  options.examId){
				this.examObj = {
					examId: options.examId,
					examName: decodeURIComponent(options.examName),
					examTime: options.examTime
				}
				this.studentName= decodeURIComponent(options.studentName),
				this.unitId= options.unitId
			}
			this.getList()
		},
		methods: {
			getList() {
				const { examObj, studentName, unitId } = this
				sameName({
					examId: examObj.examId,
					studentName,
					unitId
				}).then(res => {
					res.data.forEach(item => {
						item.className = this.replaceClass(item.className)
					})
					this.list = res.data
				})
			},
			replaceClass(value) {
			  const regex = /高20[1-9][0-9]|高[一二三123]|[班年届级()（）\s]/gm
			  const str = value
			  const subst = ``
			  const result = str.replace(regex, subst) + '班'
			  return result
			},
			// 选择名字
			onCheck(item) {
				this.checkStudentCode= item.studentCode
				this.sameNameObj=item
				this.show = true
			},
			onClick() {
				const {
					examObj,
					sameNameObj,
				} = this
				const params = {
					...examObj,
					studentCode: sameNameObj.studentCode
				}
				this.$pageTo('/bks/volunteer/myScore/detail/index', params, 'redirectTo')
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 128rpx;
  text-align: center;
  min-height: calc(80vh);
}

.container .list {
  margin-top: 60rpx;
}

.container .list .item {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #EBEBF0;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.container .list .item:last-child {
  margin-bottom: 0;
}

.container .list .item.check {
  background: #F5FAF7;
  border: 1px solid #00C15D;
  color: #00C15D;
}

.dialog-box {
	position: fixed;
	top: 50%;
	margin: -317rpx 30rpx 0;
	width: 690rpx;
	height: 634rpx;
  padding: 119rpx 0 80rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 20rpx;
}

.dialog-box .score {
  padding: 0 30rpx;
  margin: 60rpx 0 140rpx;
}

.dialog-box .score .item {
  width: 190rpx;
  padding: 30rpx 0;
  border: 1px solid #EBEBF0;
  border-radius: 8rpx;
}
.dialog-box .btn {
	margin: 0 auto;
	width: 422rpx;
  padding: 0 88rpx;
  height: 88rpx;
  color: #fff;
  background: linear-gradient(-90deg, #00B356 0%, #79DBA8 100%);
}
</style>